このモジュールでは、キャンバスコンテキストの状態を操作することで、静的パスから動的でイベント駆動型のツールへと移行します。 CanvasRenderingContext2D 状態を扱います。私たちは、 高階パターン および数学的なフィルタリングを通じて、アプリケーションの機能拡張に注力します。

1. 高階ツールパターン

例えば tools.Line というようなヘルパー関数を使ってマウスイベントを抽象化しています。一方、 trackDrag逆に、 tools.Spray は 間隔ベースの繰り返し により実装しており、マウスボタンを押したままの間、連続してピクセルを配置できます。 setInterval

2. 数学的制約

単純なランダムオフセットは正方形分布を作ります。自然な円形の「ブラシ」効果を得るためには、ピタゴラスの定理を使って点をフィルタリングします：$x^2 + y^2 < r^2$。あるいは、極座標を使用して Math.sin と Math.cos を用いて変換することも可能です。

3. 合成操作と状態

標準的な線描画以外に、 globalCompositeOperation プロパティは、新しいピクセルが既存のピクセルとどのように相互作用するかを定義します。たとえば、それを 'destination-out' に設定すると、 tools.Erase 関数がピクセルを白く塗りつぶすのではなく、透過させるようになります。 controls.color と controls.brushSize UIコントロールは、 fillStyle と lineWidth それぞれにリアルタイムで更新を行います。